<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- v-if：当条件为fals时。包含v-if的元素就不会在dom中出现 -->
            <h2 v-if="isShow" id="aaa">{{message}}</h2>
            <!-- v-show：当条件为fals时。包含v-show的元素会增加一个display:none的属性，让元素消失 -->
            <h2 v-show="isShow" id="bbb">{{message}}</h2>

            <button @click="switchs">switch</button>

            <!-- 
                ## 如何选择使用v-if还是v-show呢？
                    - 需要多次切换的时候使用v-show
                    - 只切换一次的时候使用v-if
             -->
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊',
                    isShow: true
                },
                methods: {
                    switchs() {
                        this.isShow = !this.isShow
                    }
                },
            })
        </script>
    </body>
</html>